<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area text-red">
      <text class="title">{{ title }}</text>
    </view>
    <view>
      <wd-button size="small">主要按钮</wd-button>
      <wd-button type="success" size="small">成功按钮</wd-button>
      <wd-button type="info" size="small">信息按钮</wd-button>
      <wd-button type="warning" size="small">警告按钮</wd-button>
      <wd-button type="error" size="small">危险按钮</wd-button>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/request";
import { mapStores, mapState, mapActions } from "pinia";
import { useCounterStore } from "@/stores/counter.js";
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  computed: {
    // 允许访问 this.counterStore 和 this.userStore
    ...mapStores(useCounterStore),
    ...mapState(useCounterStore, ["count", "double"]),
  },
  onLoad() {
    this.fetchData();
    this.fetchPinia();
  },
  methods: {
    ...mapActions(useCounterStore, ["increment"]),
    fetchData() {
      request.get("/api/v1/auth/login").then((res) => {
        console.log(res);
      });
    },
    fetchPinia() {
      console.log("useCounterStore", this.useCounterStore);
      console.log("count", this.count);
      console.log("double", this.double);

      this.increment();

      console.log("increment-count", this.count);
      console.log("increment-double", this.double);
    },
  },
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-top: 200rpx;
  margin-right: auto;
  margin-bottom: 50rpx;
  margin-left: auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
